<!DOCTYPE html>
{% load static %}
{% load jsonify %}
{% load ctxvalue %}

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <title>{{ page_label}}|{{ title }}</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <script src="{{ js_config.js_lib.jquery }}"></script>
    <script src="{{ js_config.js_lib.md5 }}"></script>
    <link rel="stylesheet" href="{{ js_config.js_lib.font_awesome }}">
    <script src="{{ js_config.js_lib.vuejs }}"></script>
<!--    <script src="{{ js_config.js_lib.composition_api }}"></script>-->

    <!--<script src="{{ js_config.js_lib.vuex }}"></script>-->

    <link rel="stylesheet" href="{{ js_config.js_lib.bootstrap_css }}">
    <script src="{{ js_config.js_lib.bootstrap }}"></script>

    <script src="{{ js_config.js_lib.nice_validator }}"></script>
    <link rel="stylesheet" href="{{ js_config.js_lib.nice_validator_css }}">
    <!--<link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">-->
    <!-- Theme style -->
    <script src="{{ js_config.js_lib.adminlte }}"></script>
    <link rel="stylesheet" href="{{ js_config.js_lib.adminlte_css }}">
    <link rel="stylesheet" href="{{ js_config.js_lib.adminlte_them_css }}">
<!--    <script src="{{ js_config.js_lib.moment }}"></script>-->


    <script src="{{ js_config.js_lib.element }}"></script>
    <link href="{{ js_config.js_lib.element_css }}" rel="stylesheet">
    <script src="{{ js_config.js_lib.exfun }}"></script>
    <script src="{{ js_config.js_lib.director }}"></script>

    <script src="{{ js_config.js_lib.composition_api }}"></script>
    <script src="{{ js_config.js_lib.jb_admin }}"></script>
    <!--<link rel="stylesheet" href="https://cdn.bootcss.com/admin-lte/2.4.3/css/AdminLTE.min.css">-->
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect. -->
    <!--<link rel="stylesheet" href="https://cdn.bootcss.com/admin-lte/2.4.3/css/skins/skin-blue.min.css">-->

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <!--<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>-->
    <!--<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>-->
    <![endif]-->

<!--    <title>Admin</title>-->
    <!-- Google Font -->
    <!--<link rel="stylesheet"-->
          <!--href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">-->
    <!--<script src="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>-->
    <script src="{{ js_config.js_lib.nprogress }}"></script>
    <link href="{{ js_config.js_lib.nprogress_css }}" rel="stylesheet">
    <!--<link href="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">-->

    <script>
        (function(){
            document.onreadystatechange = function(){
                NProgress.configure({ showSpinner: false });
                NProgress.start();
                console.log(document.readyState);
                if(document.readyState == "Uninitialized"){
                    NProgress.set(1);
                }
                if(document.readyState == "Interactive"){
                    NProgress.set(0.5);
                }
                if(document.readyState == "complete"){
                    NProgress.done();
                }
            }
        })();

        window.onbeforeunload=function(){
            NProgress.start();
            setInterval(function(){
                NProgress.inc()
            },300)

            if($('body').hasClass('sidebar-collapse')){
                sessionStorage.setItem("sidebar-collapse",true);
            }else{
                sessionStorage.removeItem("sidebar-collapse");
            }
        }

//        Vue.use(Vuex);
//        var store = new Vuex.Store({
//        });
    </script>
    <style>
        .bar{
            background: #dd453b !important;
        }

        .treeview:last-child ul{
            padding-bottom: 60px;
        }

        /*html {*/
            /*min-height: 100%;*/
            /*_height:100%;*/
        /*}*/
        /*body {*/
            /*margin: 0;*/
            /*padding: 0;*/
            /*min-height: 100%;*/
            /*_height:100%;*/
        /*}*/

    </style>
    {% block head-script %}
    {% endblock %}
</head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to get the
desired effect
|---------------------------------------------------------|
| SKINS         | skin-blue                               |
|               | skin-black                              |
|               | skin-purple                             |
|               | skin-yellow                             |
|               | skin-red                                |
|               | skin-green                              |
|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed                                   |
|               | layout-boxed                            |
|               | layout-top-nav                          |
|               | sidebar-collapse                        |
|               | sidebar-mini                            |
|---------------------------------------------------------|
-->

{% include 'director/reverse.html' %}

{% for lib in extra_js %}
<script src='{{ lib | ctxvalue:js_config.js_lib }}'></script>
{% endfor %}

{% for lib in extra_css %}
<link href='{{ lib | ctxvalue:js_config.js_lib }}' rel="stylesheet">
{% endfor %}

<script>
    if(js_config.is_debug){
        Vue.config.devtools = true
    }else{
        Vue.config.devtools = false
    }
    menu= {{menu| jsonify}}
    menu_search={{ menu_search | jsonify}}
    menu_expand_all = {{ menu_expand_all | jsonify }} || false
    head_bar_data ={{head_bar_data | jsonify}}

//    js_config = {//{js_config | jsonify}//}


    $(function(){

        <!--document.title = page_label + '| {{title}}'-->

        new Vue({
            el:'#control-sidebar-settings-tab',
            data:{
                lans:js_config.lans,
                cfg:cfg,
                crt_lan:js_config.crt_lan
            },
            watch:{
                crt_lan:function(v){
                    ex.setCookie('django_language',v)
                    location.reload()
                }
            }
        })
    })
</script>
<style>
    .wrapper{
        /*overflow-y: hidden;*/
    }
    .sidebar{
        position: absolute;
        top: 50px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
    }
    .sidebar-collapse  .sidebar{
        position: static;
        overflow: inherit;
    }
    .sidebar::-webkit-scrollbar {
        width: 6px!important;
        height: 6px!important;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none
    }

    .sidebar::-webkit-scrollbar-thumb {
        cursor: pointer;
        background: rgba(238, 238, 238, 0.75)
    }

    .sidebar::-webkit-scrollbar-thumb:hover {
        background: rgba(153,153,153,.4)
    }

</style>
<body class="hold-transition {{ ui_theme }} sidebar-mini">
<script>
    if(sessionStorage.getItem('sidebar-collapse')){
        $('body').addClass('sidebar-collapse')
    }
</script>
<div class="wrapper">

    <!-- Main Header -->
    <header id="head-bar" class="main-header">

        <!-- Logo -->
        <a  class="logo">
            <!-- mini logo for sidebar mini 50x50 pixels -->
            <span class="logo-mini" v-html="mini_brand"></span>
            <!-- logo for regular state and mobile devices -->
            <span class="logo-lg" v-html="brand"></span>
        </a>

        <!-- Header Navbar -->
        <nav  class="navbar navbar-static-top" role="navigation" style="display: flex">
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>
            <div style="flex-grow: 10">
                <components v-for="head in left_header_bar_widgets" :is="head.editor" :ctx="head"></components>
            </div>


<!--            <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">-->
<!--                <span class="sr-only">Toggle navigation</span>-->
<!--            </a>-->

            <!-- Navbar Right Menu -->
            <div  class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                    <!-- Messages: style can be found in dropdown.less-->
                    <li style="display: none;" class="dropdown messages-menu">
                        <!-- Menu toggle button -->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-envelope-o"></i>
                            <span class="label label-success">4</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="header">You have 4 messages</li>
                            <li>
                                <!-- inner menu: contains the messages -->
                                <ul class="menu">
                                    <li><!-- start message -->
                                        <a href="#">
                                            <div class="pull-left">
                                                <!-- User Image -->
                                                <!--<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">-->
                                            </div>
                                            <!-- Message title and timestamp -->
                                            <h4>
                                                Support Team
                                                <small><i class="fa fa-clock-o"></i> 5 mins</small>
                                            </h4>
                                            <!-- The message -->
                                            <p>Why not buy a new awesome theme?</p>
                                        </a>
                                    </li>
                                    <!-- end message -->
                                </ul>
                                <!-- /.menu -->
                            </li>
                            <li class="footer"><a href="#">See All Messages</a></li>
                        </ul>
                    </li>
                    <!-- /.messages-menu -->

                    <!-- Notifications Menu -->
                    <!--<li v-if="user_msg.length>0"  class="dropdown notifications-menu">-->
                        <!--&lt;!&ndash; Menu toggle button &ndash;&gt;-->
                        <!--<a href="#" class="dropdown-toggle" data-toggle="dropdown">-->
                            <!--<i class="fa fa-bell-o"></i>-->
                            <!--<span class="label label-warning" v-text="user_msg.length"></span>-->
                        <!--</a>-->
                        <!--<ul class="dropdown-menu">-->
                            <!--&lt;!&ndash;<li class="header">You have 10 notifications</li>&ndash;&gt;-->
                            <!--<li>-->
                                <!--&lt;!&ndash; Inner Menu: contains the notifications &ndash;&gt;-->
                                <!--<ul class="menu">-->
                                    <!--<li v-for="msg in user_msg">&lt;!&ndash; start notification &ndash;&gt;-->
                                        <!--<a :href="msg.url">-->
                                            <!--<i class="fa fa-users text-aqua"></i><span v-text="msg.title"></span>-->
                                        <!--</a>-->
                                    <!--</li>-->
                                    <!--&lt;!&ndash; end notification &ndash;&gt;-->
                                <!--</ul>-->
                            <!--</li>-->
                            <!--&lt;!&ndash;<li class="footer"><a href="#">View all</a></li>&ndash;&gt;-->
                        <!--</ul>-->
                    <!--</li>-->

                    <component :is="widget.editor" :ctx="widget" v-for="widget in header_bar_widgets"></component>

                    <!-- User Account Menu -->
                    <!--<li class="dropdown user user-menu">-->
                        <!--&lt;!&ndash; Menu Toggle Button &ndash;&gt;-->
                        <!--<a href="#" class="dropdown-toggle" data-toggle="dropdown">-->
                            <!--&lt;!&ndash; The user image in the navbar&ndash;&gt;-->
                            <!--&lt;!&ndash;<img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">&ndash;&gt;-->
                            <!--<i class="fa fa-user-circle-o"></i>-->

                            <!--&lt;!&ndash; hidden-xs hides the username on small devices so only the image appears. &ndash;&gt;-->
                            <!--<span class="hidden-xs" v-text="user.first_name || user.username">-->
                            <!--</span>-->
                        <!--</a>-->
                        <!--<ul class="dropdown-menu">-->
                            <!--&lt;!&ndash; The user image in the menu &ndash;&gt;-->
                            <!--<li class="user-header" style="font-size: 3em;">-->
                                <!--&lt;!&ndash;<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">&ndash;&gt;-->
                                <!--<i class="fa fa-user-circle-o fa-lg"></i>-->
                                <!--<p v-text="user.first_name || user.username">-->
                                <!--</p>-->
                            <!--</li>-->
                            <!--&lt;!&ndash; Menu Body &ndash;&gt;-->
                            <!--&lt;!&ndash;<li class="user-body">&ndash;&gt;-->
                                <!--&lt;!&ndash;<div class="row">&ndash;&gt;-->
                                    <!--&lt;!&ndash;<div class="col-xs-4 text-center">&ndash;&gt;-->
                                        <!--&lt;!&ndash;<a href="#">Followers</a>&ndash;&gt;-->
                                    <!--&lt;!&ndash;</div>&ndash;&gt;-->
                                    <!--&lt;!&ndash;<div class="col-xs-4 text-center">&ndash;&gt;-->
                                        <!--&lt;!&ndash;<a href="#">Sales</a>&ndash;&gt;-->
                                    <!--&lt;!&ndash;</div>&ndash;&gt;-->
                                    <!--&lt;!&ndash;<div class="col-xs-4 text-center">&ndash;&gt;-->
                                        <!--&lt;!&ndash;<a href="#">Friends</a>&ndash;&gt;-->
                                    <!--&lt;!&ndash;</div>&ndash;&gt;-->
                                <!--&lt;!&ndash;</div>&ndash;&gt;-->
                                <!--&lt;!&ndash;&lt;!&ndash; /.row &ndash;&gt;&ndash;&gt;-->
                            <!--&lt;!&ndash;</li>&ndash;&gt;-->
                            <!--&lt;!&ndash; Menu Footer&ndash;&gt;-->
                            <!--<li class="user-footer">-->
                                <!--<div class="pull-left">-->
                                    <!--<a href="/accounts/pswd" class="btn btn-default btn-flat" v-text="tr.change_password"></a>-->
                                <!--</div>-->
                                <!--<div class="pull-right">-->
                                    <!--<a href="/accounts/logout" class="btn btn-default btn-flat" v-text="tr.logout"></a>-->
                                <!--</div>-->
                            <!--</li>-->
                        <!--</ul>-->
                    <!--</li>-->

                    <!-- Control Sidebar Toggle Button -->
                    {% if fast_config_panel %}
                    <li>
                        <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
                    </li>
                    {% endif %}
                </ul>
            </div>
        </nav>
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar" id="main-sidebar">

        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">

            <!-- Sidebar user panel (optional) -->
            <!--<div class="user-panel">-->
                <!--<div class="pull-left image">-->
                    <!--<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">-->
                <!--</div>-->
                <!--<div class="pull-left info">-->
                    <!--<p>Alexander Pierce</p>-->
                    <!--&lt;!&ndash; Status &ndash;&gt;-->
                    <!--<a href="#"><i class="fa fa-circle text-success"></i> Online</a>-->
                <!--</div>-->
            <!--</div>-->

            <!-- search form (Optional) -->
            <div action="#" method="get" class="sidebar-form" v-if="menu_search">
                <div class="input-group">
                    <input type="text" name="q" class="form-control" v-model="menu_search_value" :placeholder="tr.search+'...'">
                <span class="input-group-btn">
                  <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
                  </button>
                </span>
                </div>
            </div>
            <!-- /.search form -->

            <!-- Sidebar Menu -->
            <ul v-if="menu_expand_all" class="sidebar-menu" data-widget="tree" data-api="tree" data-accordion=0>
                <!--<li class="header">HEADER</li>-->
                <!-- Optionally, you can add icons to the links -->
                <!--<li style="height: 20px;"></li>-->
                <li v-for="action in filted_menu" :class="{active:true,treeview:action.submenu}">
                    <a :href="action.url">
                        <i v-html="action.icon"></i>
                        <!--<i class="fa fa-link"></i>-->
                        <span v-text="action.label"></span>
                    <span v-if="action.submenu" class="pull-right-container">
                        <i class="fa fa-angle-left pull-right"></i>
                      </span>
                    </a>
                    <ul v-if="action.submenu" class="treeview-menu">
                        <!--<li><a href="#">Link in level 2</a></li>-->
                        <li v-for="subact in action.submenu" :class="{'active':is_active(subact)}">
                            <a :href="subact.url">
                                <i class="fa fa-circle-o"></i>
                                <span v-text="subact.label"></span>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
            <ul v-else class="sidebar-menu" data-widget="tree" >
                <!--<li class="header">HEADER</li>-->
                <!-- Optionally, you can add icons to the links -->
                <!--<li style="height: 20px;"></li>-->
                <li v-for="action in filted_menu" :class="{active:is_active(action),treeview:action.submenu}">
                    <a :href="action.url">
                        <i v-html="action.icon"></i>
                        <!--<i class="fa fa-link"></i>-->
                        <span v-text="action.label"></span>
                    <span v-if="action.submenu" class="pull-right-container">
                        <i class="fa fa-angle-left pull-right"></i>
                    </span>
                    </a>
                    <!--二级菜单-->
                    <ul v-if="action.submenu" class="treeview-menu">
                        <!--<li><a href="#">Link in level 2</a></li>-->
                        <!--leve2_url(subact)-->
                        <li v-for="subact in action.submenu" :class="{'active':is_active(subact),treeview:subact.submenu}">
                            <a  :href="subact.url">
                                <i class="fa fa-circle-o"></i>
                                <span v-text="subact.label"></span>
                                <span v-if="subact.submenu" class="pull-right-container">
                                    <i class="fa fa-angle-left pull-right"></i>
                              </span>
                            </a>

                            <!--三级菜单-->
                            <ul v-if="subact.submenu" class="treeview-menu">
                                <li v-for="sub_subact in subact.submenu" :class="{'active':is_active(sub_subact)}">
                                    <a :href="sub_subact.url">
                                        <i class="fa fa-square-o"></i>
                                        <span v-text="sub_subact.label"></span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
            <!-- /.sidebar-menu -->
        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">

        <section class="content container-fluid">

            {% block page_content %}

            {% endblock %}

        </section>
        <!--<div id='content' class="flex-grow">-->

        <!--</div>-->

        <!--&lt;!&ndash; Content Header (Page header) &ndash;&gt;-->
        <!--<section class="content-header">-->
            <!--<h1>-->
                <!--Page Header-->
                <!--<small>Optional description</small>-->
            <!--</h1>-->
            <!--<ol class="breadcrumb">-->
                <!--<li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>-->
                <!--<li class="active">Here</li>-->
            <!--</ol>-->
        <!--</section>-->

        <!--&lt;!&ndash; Main content &ndash;&gt;-->
        <!--<section class="content container-fluid">-->

            <!--&lt;!&ndash;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;-->
              <!--| Your Page Content Here |-->
              <!--&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&ndash;&gt;-->

        <!--</section>-->
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <!-- Main Footer -->
    <!--<footer class="main-footer">-->
        <!--&lt;!&ndash; To the right &ndash;&gt;-->
        <!--<div class="pull-right hidden-xs">-->
            <!--Anything you want-->
        <!--</div>-->
        <!--&lt;!&ndash; Default to the left &ndash;&gt;-->
        <!--<strong>Copyright &copy; 2016 <a href="#">Company</a>.</strong> All rights reserved.-->
    <!--</footer>-->

    <!-- Control Sidebar -->

    <aside class="control-sidebar control-sidebar-dark" >
        <!--自己加的，为了关闭右侧滑动面板-->
        <div class="right-sidebar-mask" style="position: absolute;top:0;right: 0;height:100vh;width:100vw;z-index:-1" href="#" data-toggle="control-sidebar"></div>
        <!-- Create the tabs -->
        <!--<ul class="nav nav-tabs nav-justified control-sidebar-tabs">-->
            <!--<li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>-->
            <!--<li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>-->
        <!--</ul>-->
        <!-- Tab panes -->
        <!--<div class="tab-content">-->
            <!--&lt;!&ndash; Home tab content &ndash;&gt;-->
            <!--<div class="tab-pane active" id="control-sidebar-home-tab">-->
                <!--<h3 class="control-sidebar-heading">Recent Activity</h3>-->
                <!--<ul class="control-sidebar-menu">-->
                    <!--<li>-->
                        <!--<a href="javascript:;">-->
                            <!--<i class="menu-icon fa fa-birthday-cake bg-red"></i>-->

                            <!--<div class="menu-info">-->
                                <!--<h4 class="control-sidebar-subheading">Langdon's Birthday</h4>-->

                                <!--<p>Will be 23 on April 24th</p>-->
                            <!--</div>-->
                        <!--</a>-->
                    <!--</li>-->
                <!--</ul>-->
                <!--&lt;!&ndash; /.control-sidebar-menu &ndash;&gt;-->

                <!--<h3 class="control-sidebar-heading">Tasks Progress</h3>-->
                <!--<ul class="control-sidebar-menu">-->
                    <!--<li>-->
                        <!--<a href="javascript:;">-->
                            <!--<h4 class="control-sidebar-subheading">-->
                                <!--Custom Template Design-->
                <!--<span class="pull-right-container">-->
                    <!--<span class="label label-danger pull-right">70%</span>-->
                  <!--</span>-->
                            <!--</h4>-->

                            <!--<div class="progress progress-xxs">-->
                                <!--<div class="progress-bar progress-bar-danger" style="width: 70%"></div>-->
                            <!--</div>-->
                        <!--</a>-->
                    <!--</li>-->
                <!--</ul>-->
                <!--&lt;!&ndash; /.control-sidebar-menu &ndash;&gt;-->

            <!--</div>-->
            <!-- /.tab-pane -->
            <!-- Stats tab content -->
            <div class="tab-pane active" id="control-sidebar-settings-tab" style="padding: 1em;">
                 <h3 v-text="cfg.tr.base_setting"></h3>
                <label for="lans" v-text="cfg.tr.language"></label>
                <select name="" id="lans" v-model="crt_lan" class="form-control">
                    <option v-for="lan in lans" :value="lan.value" v-text="lan.label"></option>
                </select>
            </div>
            <!-- /.tab-pane -->
            <!-- Settings tab content -->
            <!--<div class="tab-pane" id="control-sidebar-settings-tab1">-->
                <!--<form method="post">-->
                    <!--<h3 class="control-sidebar-heading">General Settings</h3>-->

                    <!--<div class="form-group">-->
                        <!--<label class="control-sidebar-subheading">-->
                            <!--Report panel usage-->
                            <!--<input type="checkbox" class="pull-right" checked>-->
                        <!--</label>-->

                        <!--<p>-->
                            <!--Some information about this general settings option-->
                        <!--</p>-->
                    <!--</div>-->
                    <!--&lt;!&ndash; /.form-group &ndash;&gt;-->
                <!--</form>-->
            <!--</div>-->
            <!-- /.tab-pane -->
        <!--</div>-->
    </aside>
    <!-- /.control-sidebar -->
    <!-- Add the sidebar's background. This div must be placed
    immediately after the control sidebar -->

    <div class="control-sidebar-bg" ></div>

</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 3 -->
<!--<script src="bower_components/jquery/dist/jquery.min.js"></script>-->
<!--&lt;!&ndash; Bootstrap 3.3.7 &ndash;&gt;-->
<!--<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>-->
<!--&lt;!&ndash; AdminLTE App &ndash;&gt;-->
<!--<script src="dist/js/adminlte.min.js"></script>-->

<!-- Optionally, you can add Slimscroll and FastClick plugins.
     Both of these plugins are recommended to enhance the
     user experience. -->
</body>
<script>

    rootStore = new Vue()

        new Vue({
            el: '#main-sidebar',//'.sidebar-menu',
            data:{
                menu:menu,
                menu_expand_all:menu_expand_all,
                menu_search:menu_search,
                menu_search_value:'',
                tr:cfg.tr,
            },
            computed:{
                filted_menu:function(){
                    var tmp_menus = ex.copy(this.menu)
                    if(this.menu_search_value == ''){
                        return tmp_menus
                    }
                    var self=this
                    var valid_menus = ex.filter(tmp_menus,function(menu){
                            return menu.label.toLowerCase().indexOf(self.menu_search_value.toLowerCase()) !=-1
                    })

                    ex.each(tmp_menus,function(menu){
                        if(menu.submenu && menu.submenu.length != 0 ){
                            if(! ex.isin(menu,valid_menus)){
                                ex.remove(menu.submenu,function(act){
                                    return act.label.toLowerCase().indexOf(self.menu_search_value.toLowerCase()) ==-1
                                })
                            }
                        }
                    })
                    ex.remove(tmp_menus,function(menu){
                        if(ex.isin(menu,valid_menus)){
                            return false
                        }
                        if(!menu.submenu || menu.submenu.length == 0){
                            return true
                        }else{
                            return false
                        }
                    })
                    return tmp_menus
                }
            },
            methods:{
                is_active:function(action){
                    var self=this
                    if (action.url == location.pathname){
                        return true
                    }else if(action.submenu){
                        var find_submenu_active= false
                        for(var i=0;i<action.submenu.length;i++){
                            var subact = action.submenu[i]
                            find_submenu_active = self.is_active(subact)
                            if(find_submenu_active){
                                return true
                            }
                        }
                        return find_submenu_active
                    }else{
                        return false
                    }
                },
                leve2_url:function(action){
                    if(this.is_active(action)){
                        return location.pathname
                    }else{
                        return ''
                    }

                },
            }
        })
    new Vue({
        el:'#head-bar',
        data:{
            user:head_bar_data.user,
            mini_brand:head_bar_data.mini_brand,
            brand:head_bar_data.brand,
            header_bar_widgets:head_bar_data.header_bar_widgets,
            left_header_bar_widgets:head_bar_data.left_header_bar_widgets,
            tr:cfg.tr,
            user_msg:user_msg,
        },
        mounted:function(){
            $('.sidebar-toggle').click(function(){
                Vue.nextTick(function(){
                    rootStore.$emit('content_resize')
                })
            })
            $(window).resize(function(){
                Vue.nextTick(function(){
                    rootStore.$emit('content_resize')
                })
            })
        },
        methods:{
            sidebar_toggle:function(){

            }
        }
    })


</script>
<!--<script src="https://cdn.bootcss.com/admin-lte/2.4.3/js/adminlte.min.js"></script>-->

<!--<script src="/static/lib/layui/layui.js"></script>-->
<!--<script src="/static/lib/layui/lay/modules/layer.js"></script>-->
<!--<script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>-->
<script src="{{ js_config.js_lib.layer }}"></script>

<!--<script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>-->
<!--<script src="https://unpkg.com/vue-easytable/umd/js/index.js"></script>-->
<!--<link rel="stylesheet" href="https://unpkg.com/vue-easytable/umd/css/index.css">-->

<!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->

{% if js_config.tr.element_translation_js != "element_translation_js" %}
    <script src="{{ js_config.tr.element_translation_js }}"></script>
    <script>
    ELEMENT.locale(ELEMENT.lang.en)
    <!--if(js_config.tr.element_translation_js!=''){-->
        <!--ex.eval(js_config.tr.element_translation_js)-->
    <!--}-->
    </script>
{% endif %}


<!--<link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">-->
<!--<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>-->



<script>
    init_express={{ init_express | jsonify }}
    if(init_express){
        ex.eval(init_express)
    }
</script>

<style>
    .right-sidebar-mask{
        display: none;
    }
    .control-sidebar-open .right-sidebar-mask{
        display: block;
    }
 
</style>
</html>